<template>
    <div>
      {{ list }}
      <h3>展示学员信息区域</h3>
      <table align="center" style="width:800px"  border="1" contenteditable="0">
         <thead>
          <tr>
              <th>编号</th>
              <th>姓名</th>
              <th>手机号</th>
              <th>时间</th>
              <th>操作</th>
          </tr>
         </thead>
          <tbody align="center">
              <tr v-for="item,index in list" :key="index">
              <td>{{ index+1 }}</td>
              <td>{{ item.name }}</td>
              <td>{{ item.phone }}</td>
              <td>{{ item.data }}</td>
              <td><button @click="bj(item,index)">编辑</button> <button @click="del(index)">删除</button></td>
          </tr>
          </tbody>
      </table>
    </div>
  </template>
  
  <script setup>
  import { onMounted,reactive } from "vue"
  
  import emitter from "../../utils/bus"
  let list = reactive([])
  onMounted(() => {
      emitter.on('channel', (info) => {
          console.log(info);
          list.push(info)
          console.log(list)
      })
      emitter.on('edit1', (info1) => {
          console.log(info1);
          list[info1.index].name =info1.name
          list[info1.index].phone =info1.phone
      })
  })
  function del(index){
      list.splice(index,1)
  }
  function bj(item,index){
      emitter.emit('bj',{item,index})
  }
  </script>
  
  <style>
  
  </style>